<template>
  <div class="sysuser">
    <!-- 供应商用户创建 -->
    <!-- 查询表单 -->
    <el-form ref="form" :model="form" style="padding-left:15px" :rules="rules" size="mini" :inline="true">
      <!-- <el-row :gutter="12" class="row"> -->
      <!-- <el-col :span="6"> -->
      <el-form-item label="供应商名称：" prop="fltName">
        <el-input v-model="form.fltName" clearable width="180px"></el-input>
      </el-form-item>
      <!-- </el-col> -->

      <!-- <el-col :span="2"> -->
      <el-form-item size="mini">
        <el-button type="primary" @click="submitForm('form')">查询</el-button>
      </el-form-item>
      <!-- </el-col> -->
      <!-- </el-row> -->
    </el-form>
    <!-- 主表操作按钮 -->
    <div class="btn-area">
      <buttonName @clickEvent="clickEventDom"></buttonName>
      <!--      <el-button plain size="mini" type="primary" v-if="isAuth('editSupplier')" @click="editSupplier">编辑</el-button>-->
      <!--      <el-button plain size="mini" type="primary" v-if="isAuth('delSupplier')" @click="delSupplier">删除</el-button>-->
    </div>
    <!-- table表单 -->
    <div class="sysuser-table">
      <!-- 主表数据展示 -->
      <!-- @row-click="" -->
      <!-- @row-dblclick='' -->
      <div class="inner" ref="inner">
        <el-table
          :data="MainTableData"
          style="width:100%;height:100%"
          border
          :height="maxHeight"
          :header-cell-style="{ textAlign: 'center' }"
          highlight-current-row
          @row-click="rowClick"
        >
          <el-table-column type="index" :index="indexMethod" align="center" label=" " width="50"></el-table-column>

          <el-table-column prop="fltCode" label="企业代码" width="110" show-overflow-tooltip sortable></el-table-column>
          <el-table-column prop="fltName" label="企业名称" width="110" show-overflow-tooltip sortable></el-table-column>
          <el-table-column prop="fltAddress" label="企业地址" width="110" show-overflow-tooltip sortable></el-table-column>
          <el-table-column prop="fltLinkphone" label="企业电话" width="110" show-overflow-tooltip sortable></el-table-column>
          <el-table-column prop="cltCliLegalname" width="150" label="法人身份证姓名" show-overflow-tooltip sortable></el-table-column>
          <el-table-column prop="cltCliLegalid" width="130" label="法人身份证号" show-overflow-tooltip sortable></el-table-column>
          <el-table-column prop="fltContact" width="150" label="联系人" show-overflow-tooltip sortable></el-table-column>
          <el-table-column prop="fltContactPhone" width="130" label="联系人电话" show-overflow-tooltip sortable></el-table-column>
          <!--          <el-table-column prop="cltCliLegalphone" label="法人联系电话" show-overflow-tooltip sortable ></el-table-column>-->
          <el-table-column prop="cltRegistorno" width="145" label="营业执照注册号" show-overflow-tooltip sortable></el-table-column>
          <el-table-column prop="fltBank" width="145" label="开户行" show-overflow-tooltip sortable></el-table-column>
          <el-table-column prop="fltAccount" width="145" label="银行账号" show-overflow-tooltip sortable></el-table-column>
          <el-table-column prop="fltBankCode" width="145" label="开户行代码" show-overflow-tooltip sortable></el-table-column>
          <el-table-column prop="fltBranchName" width="145" label="支行名称" show-overflow-tooltip sortable></el-table-column>
          <el-table-column prop="fltBranchCode" width="145" label="支行代码" show-overflow-tooltip sortable></el-table-column>
          <el-table-column prop="fltStatus" label="是否可用" width="110" show-overflow-tooltip align="center" sortable>
            <template slot-scope="scope">
              <el-checkbox :value="scope.row.fltStatus == '0' ? true : false" :disabled="true"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column align="center" show-overflow-tooltip width="120px" label="查看用户" prop="userCount">
            <template slot-scope="scope">
              <el-button v-if="scope.row.userNum != 0" size="mini" type="primary" plain @click="showUserDialog(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <!-- 分页 -->
    <div class="block">
      <el-pagination
        ref="pagination"
        small
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="Pagination.currentPage"
        :page-sizes="Pagination.pageSizeList"
        :page-size="Pagination.PageSize"
        :layout="Pagination.layout"
        :total="Pagination.total"
      ></el-pagination>
    </div>
    <!-- 查看用户弹出框 -->
    <el-dialog :title="seeUser" width="40%" :visible.sync="openSeeUserDialog" v-el-drag-dialog :before-close="close" :close-on-click-modal="false">
      <el-table :data="userData" border height="500px">
        <el-table-column align="center" width="50" label="序号" :index="indexMethod" type="index"></el-table-column>
        <el-table-column align="center" show-overflow-tooltip width="100px" label="用户代码" prop="usrCode"></el-table-column>
        <el-table-column align="center" show-overflow-tooltip label="用户名称" prop="usrName"></el-table-column>
        <el-table-column align="center" show-overflow-tooltip label="联系电话" prop="usrCellphone"></el-table-column>
        <el-table-column align="center" show-overflow-tooltip label="邮箱" prop="usrEmail"></el-table-column>
        <el-table-column align="center" show-overflow-tooltip label="角色" prop="usrRlesName" label-width="120px"></el-table-column>
        <el-table-column align="center" show-overflow-tooltip width="80px" label="状态" prop="usrStatus">
          <template slot-scope="scope">
            <span v-if="scope.row.usrStatus == 'N'">不可用</span>
            <span v-if="scope.row.usrStatus == 'Y'">可用</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 评分弹出框 -->
    <el-dialog
      width="70%"
      v-el-drag-dialog
      :title="title"
      @close="closeDialog"
      :visible.sync="dialogFormVisible"
      v-if="dialogFormVisible"
      :close-on-click-modal="false"
      :destroy-on-close="true"
    >
      <div class="pingfen">
        <div class="tableBox">
          <el-table
            :data="tableData"
            border
            @row-click="rowClickA"
            header-row-class-name="tableHead"
            style="width: 100%"
            :header-cell-style="{ textAlign: 'center', height: '60px' }"
            :cell-style="{ textAlign: 'center' }"
          >
            <el-table-column prop="ruleProject" label="考核项目" width="300">
              <template slot-scope="scope"
                >{{ scope.row.ruleProject }}({{ scope.row.ruleMaxscore }}分)</template
              >
            </el-table-column>
            <el-table-column prop="ruleStandard" label="评分标准" width="659"></el-table-column>
            <el-table-column prop="score" label="得分/分" width="300">
              <template slot-scope="scope">
                <el-form :model="scope.row">
                  <el-form-item v-if="scope.row.ruleId" prop="score" :rules="score">
                    <el-input :maxlength="maxlength" @input="change()" v-model="scope.row.score" clearable size="mini"></el-input>
                  </el-form-item>
                  <span v-else>{{ scope.row.score }}</span>
                </el-form>
              </template>
            </el-table-column>
          </el-table>
          <el-table
            :data="tableDatab"
            :show-header="header"
            border
            header-row-class-name="tableHead"
            style="width: 100%"
            :header-cell-style="{ textAlign: 'center', height: '60px' }"
            :cell-style="{ textAlign: 'center' }"
          >
            <el-table-column prop label width="300"></el-table-column>
            <el-table-column prop="project" label width="659"></el-table-column>
            <el-table-column prop="score" label="得分/分" width="300">
              <template slot-scope="scope">
                <el-form :model="scope.row">
                  <el-form-item v-if="scope.row.status" prop="score" :rules="score1">
                    <el-input
                      size="mini"
                      @input="change"
                      v-model="scope.row.score"
                      clearable
                      oninput="value=value.replace(/[^{0-5}]/g,'')"
                      maxlength="1"
                      :disabled="scope.$index == tableDatab.length - 1"
                    ></el-input>
                  </el-form-item>
                  <span v-else>{{ scope.row.score }}</span>
                </el-form>
              </template>
            </el-table-column>
          </el-table>
          <div class="buttonBox">
            <button @click="submit">保存</button>
          </div>
          <div class="remark">
            <p>
              备注：
              <br />1、总分100分，由风控部与储运中心共同评分，达60分及以上可列入准入名单。
              <br />2、偿债能力指标和盈利能力指标的评价来源于《企业绩效评价标准值》——运输业行业指标（国务院国资委考核分配局编制）
            </p>
          </div>
        </div>
      </div>
    </el-dialog>

    <el-dialog
      :title="name"
      :visible.sync="openDialog"
      v-if="openDialog"
      v-el-drag-dialog
      :before-close="close"
      :destroy-on-close="true"
      :close-on-click-modal="false"
    >
      <el-form :model="dialogForm" size="mini" :rules="dialogRule" ref="dialogForm" label-width="auto">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="fltName" label="企业名称：">
              <el-input v-model="dialogForm.fltName" style="width:95%" clearable maxlength="32"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="fltAddress" label="企业地址：">
              <el-input v-model="dialogForm.fltAddress" style="width:95%" clearable maxlength="32"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="fltLinkphone" label="企业电话：">
              <el-input v-model="dialogForm.fltLinkphone" style="width:95%" clearable maxlength="32"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="fltCode" label="企业代码：">
              <el-input v-model="dialogForm.fltCode" style="width:95%" clearable maxlength="32"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="fltContact" label="联系人：">
              <el-input v-model="dialogForm.fltContact" style="width:95%" clearable maxlength="32"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="fltContactPhone" label="联系人电话：">
              <el-input v-model="dialogForm.fltContactPhone" style="width:95%" clearable maxlength="32"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item prop="fltBank" label="开户行：">
              <el-input v-model="dialogForm.fltBank" style="width:95%" clearable maxlength="32"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="fltBankCode" label="开户行代码：">
              <el-input v-model="dialogForm.fltBankCode" style="width:95%" clearable maxlength="32"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="fltBranchName" label="支行名称：">
              <el-input v-model="dialogForm.fltBranchName" style="width:95%" clearable maxlength="32"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="fltBranchCode" label="支行代码：">
              <el-input v-model="dialogForm.fltBranchCode" style="width:95%" clearable maxlength="32"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item prop="fltAccount" label="银行账户:">
              <el-input v-model="dialogForm.fltAccount" style="width:95%" clearable maxlength="32"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="cltCliLegalname" label="法人身份证姓名：">
              <el-input v-model="dialogForm.cltCliLegalname" style="width:95%" clearable disabled maxlength="32"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item prop="cltCliLegalid" label="法人身份证号：">
              <el-input v-model="dialogForm.cltCliLegalid" style="width:95%" clearable disabled maxlength="32"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="cltRegistorno" label="营业执照注册号：">
              <el-input v-model="dialogForm.cltRegistorno" style="width:95%" clearable disabled maxlength="32"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="son" style="width:100%;height:205px;overflow:hidden;white-space:nowrap;">
        <div class="tu1" style="float:left;width:33%;height:200px;">
          营业执照:
          <img style="width:200px;height:150px;" :src="dialogForm.businessLicense" />
        </div>
        <div class="tu2" style="float:left;width:33%;height:200px;">
          身份证正面:
          <img style="width:200px;height:150px;" :src="dialogForm.idCardFront" />
        </div>
        <div class="tu3" style="float:left;width:33%;height:200px;">
          身份证反面:
          <img style="width:200px;height:150px;" :src="dialogForm.idCardBack" />
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close" size="mini">关闭</el-button>
        <el-button type="primary" @click="okAudit" size="mini">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { queryUseresA, auditMethod, insertScore, getCriteriaAdd, getCriteriaEdit, insertScoreList, queryCompanyInfo, queryCompanyUserInfo } from '@/request/api'
import resizeMixin from '@/mixins/resize'
import isAuth from '@/mixins/buttonAuth'
import paginationMixin from '@/mixins/pagination'
import { checkSysfleetList, delSysFleet, editSysFleet } from '@/request/supplierManagement/SupplierMaintenance'
import buttonName from '@/components/buttonName/button-name'

export default {
  name: 'router.SupplierMaintenance',
  mixins: [resizeMixin, paginationMixin, isAuth],

  data() {
    var fltCodevalidator1 = (rule, value, callback) => {
      this.maxlength = 2
      var reg = /[0-9]/g
      if (value == reg) {
        callback()
      } else if (!reg.test(value)) {
        callback(new Error('不符合评分标准'))
      }
    }
    var fltCodevalidator2 = (rule, value, callback) => {
      var reg = /[0-9]/g
      if (value == reg) {
        callback()
      } else if (!reg.test(value)) {
        callback(new Error('不符合评分标准'))
      } else if (value > this.maxscore) {
        callback(new Error('分数不能高于最高分'))
      } else if (value < 0) {
        callback(new Error('分数不能为负数'))
      }
    }
    return {
      maxscore: 100,
      header: false,
      form: {
        userName: '',
        fltName: '',
        fltAuditStatus: ''
      },
      options: [
        {
          value: 'N',
          label: '未审核'
        },
        {
          value: 'Y',
          label: '已审核'
        }
      ],
      dialogRule: {
        fltName: [{ required: true, message: '请输入企业名称', trigger: 'blur' }],
        fltAddress: [{ required: true, message: '请输入企业地址', trigger: 'blur' }],
        fltLinkphone: [{ required: true, message: '请输入企业电话', trigger: 'blur' }],
        fltCode: [{ required: true, message: '请输入企业代码', trigger: 'blur' }],
        gysServiceRate: [
          {
            pattern: /^(0.\d+|0|1)$/,
            message: '请输入0-1的小数',
            trigger: 'change'
          }
        ],
        fltContact: [{ required: true, message: '清楚输入联系人', trigger: 'blur' }],
        fltContactPhone: [{ required: true, message: '清楚输入联系人电话', trigger: 'blur' }],
        fltBank: [{ required: true, message: '清楚输入开户行', trigger: 'blur' }],
        fltBankCode: [{ required: true, message: '清楚输入开户行代码', trigger: 'blur' }],
        fltBranchName: [{ required: true, message: '清楚输入支行名称', trigger: 'blur' }],
        fltBranchCode: [{ required: true, message: '清楚输入支行代码', trigger: 'blur' }],
        fltAccount: [{ required: true, message: '清楚输入银行账户', trigger: 'blur' }]
      },
      maxlength: '',
      seeUser: '',
      //表格数据
      MainTableData: [],
      //选中行数据
      selectData: [],
      userData: [],
      tableDataA: {},
      dialogFormVisible: false,
      openDialog: false,
      openSeeUserDialog: false,
      operate: '',
      name: '',
      dialogForm: {},
      see: true,
      titlle: '',
      maxHeight: 0,
      score1: [
        {
          required: true,
          validator: fltCodevalidator1,
          trigger: ['blur', 'change']
        }
      ],
      score: [
        {
          required: true,
          validator: fltCodevalidator2,
          trigger: ['blur', 'change']
        }
      ],
      tableData: [],
      tableDatab: [{ project: '总分', key: 'type', score: this.totalscore, status: 1 }],
      dataList: []
    }
  },
  mounted() {
    this.listData()
  },
  methods: {
    clickEventDom(item) {
      if (item.mdlCode === 'editSupplier') {
        this.editSupplier()
      } else if (item.mdlCode === 'delSupplier') {
        this.delSupplier()
      }
    },
    closeDialog() {
      this.tableData.forEach(item => {
        item.score = ''
      })
      this.tableDatab[0].score = ''
    },
    rowClickA(row) {
      this.maxscore = Number(row.ruleMaxscore)
    },
    //查询企业用户弹窗
    showUserDialog(item) {
      let _this = this
      queryCompanyUserInfo({ uuid: item.uuid }).then(res => {
        console.log(res)

        _this.userData = res.data
        console.log(this.userData)
        _this.openSeeUserDialog = true
      })
    },
    //评分弹出框列表接口
    listData() {
      insertScoreList().then(res => {
        res.data.forEach(item => {
          item.score = ''
        })
        this.tableData = res.data
      })
    },
    //查询按钮
    submitForm(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          this.refreshList()
        }
      })
    },
    //获取列表数据
    getList(currentPage, pageSize, updateTotal) {
      this.currentCodeList = []
      checkSysfleetList({
        fltName: this.form.fltName,
        PageIndex: this.Pagination.currentPage,
        PageSize: this.Pagination.pageSize
      }).then(response => {
        this.MainTableData = response.data
        console.log(this.MainTableData, 'this.MainTableData')
        updateTotal(Number(response.total))
      })
      this.selectData = {}
    },
    //选中行事件
    rowClick(row) {
      this.selectData = row
    },
    // 审核
    editSupplier() {
      if (Object.keys(this.selectData).length === 0) {
        this.$alert('请选择需要编辑的供应商！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.openDialog = true
      this.name = '编辑'
      queryCompanyInfo({ fltUuid: this.selectData.uuid }).then(res => {
        this.dialogForm = res.data.data
        console.log(this.dialogForm)
      })
    },
    // 审核
    delSupplier() {
      if (Object.keys(this.selectData).length === 0) {
        this.$alert('请选择需要删除的供应商！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.$confirm('您确认要删除此供应商吗?', '提示', {
        closeOnClickModal: false
      }).then(() => {
        delSysFleet({ uuid: this.selectData.uuid }).then(res => {
          if (res.success === '1') {
            this.$message({
              type: 'success',
              message: '删除成功',
              showClose: true
            })
            this.refreshList()
          }
        })
      })
    },
    okAudit() {
      this.$refs['dialogForm'].validate(validate => {
        console.log(validate)
        if (validate) {
          editSysFleet({
            companyData: this.dialogForm
          }).then(res => {
            if (res.success === '1') {
              this.$message({
                type: 'success',
                message: '编辑成功',
                showClose: true
              })
              this.close()
            }
          })
        }
      })
    },

    close() {
      this.openSeeUserDialog = false
      this.openDialog = false
      this.userData = []
      this.selectData = {}
      this.dialogForm = {}
      this.refreshList()
    },
    //input框数据回显  data返回为null为新增，否则为编辑
    getCriteriaadd() {
      getCriteriaAdd({ fltUuid: this.selectData.uuid }).then(res => {
        res.data.forEach(item => {
          item.ruleId = '1'
        })
        this.dataList = res.data
        if (res.data.length === 0 || res.data === null) {
          this.listData()
        } else {
          this.tableData = this.dataList
          this.change()
          //  this.tableDatab[0].score = this.totalscore
        }
      })
    },
    //点击评分
    pingfen() {
      if (Object.keys(this.selectData).length == 0) {
        this.$alert('请选择需要评分的数据！', '提示', {
          confirmButtonText: '确定'
        })
        return
      }
      this.title = '评分'
      this.dialogFormVisible = true
      this.getCriteriaadd()
    },
    change() {
      let newArr = []
      let scoreArr = []
      this.tableData.forEach(item => {
        if (item.score) {
          scoreArr.push(item.score)
        } else {
          newArr.push(item)
        }
      })
      // this.tableDatab.forEach((items,index) => {
      //   if(index<this.tableDatab.length-1){
      //   if(items.score) {
      //     scoreArr.push(items.score)
      //   }else {
      //     newArr.push(items)
      //   }
      //   }
      // })
      let numAarr = 0
      scoreArr.forEach(val => {
        numAarr += Number(val)
        this.tableDatab[this.tableDatab.length - 1].score = String(numAarr)
      })

      this.totalscore = this.tableDatab[this.tableDatab.length - 1].score
    },
    //点击保存
    submit() {
      let errorArr = []
      let newArr = []
      let scoreArr = []
      let typeArr = []
      this.tableData.forEach(item => {
        if (item.score > this.maxscore) {
          errorArr.push(item.score)
        }
        if (item.ruleProject) {
          typeArr.push(item.ruleProject)
        }
        if (item.score) {
          scoreArr.push(item.score)
        } else {
          newArr.push(item)
        }
      })
      // this.tableDatab.forEach(items => {
      //   if(items.score) {
      //     scoreArr.push(items.score)
      //   }else {
      //     newArr.push(items)
      //   }
      // })
      if (newArr.length > 0) {
        this.$message({
          type: 'error',
          message: '请输入分数'
        })
        return
      }
      if (errorArr.length > 0) {
        this.$message({
          type: 'error',
          message: '输入分数不符合评分标准'
        })
        return
      }
      if (this.dataList.length === 0 || this.dataList === null) {
        insertScore({
          fltTotal: this.totalscore,
          score: scoreArr,
          fltUuid: this.selectData.uuid,
          project: typeArr
        }).then(res => {
          if (res.success == '1') {
            this.$message({
              type: 'success',
              message: '提交成功'
            })
          }
          this.dialogFormVisible = false
          this.refreshList()
        })
      } else {
        //编辑
        getCriteriaEdit({
          fltTotal: this.totalscore,
          fltUuid: this.selectData.uuid,
          score: scoreArr,
          project: typeArr
        }).then(res => {
          if (res.success == '1') {
            this.$message({
              type: 'success',
              message: '编辑成功'
            })
          }
          this.dialogFormVisible = false
          this.refreshList()
        })
      }
    }
  },
  created() {
    this.refreshList()
  },
  components: {
    buttonName
  }
}
</script>
<style lang="scss" scoped>
.pingfen {
  .tableBox {
    padding: 10px 20px;
    .buttonBox {
      height: 100px;
      line-height: 100px;
      text-align: center;
      button {
        width: 150px;
        height: 45px;
        background-color: #169bd5;
        cursor: pointer;
        color: #fff;
        font-size: 20px;
      }
    }
    .remark {
      p {
        font-size: 15px;
      }
    }
  }
}
.tableHead {
  font-size: 18px;
  letter-spacing: 3px;
}
.sysuser {
  padding-top: 15px;
  height: 100%;
  display: flex;
  flex-direction: column;
  .btn-area {
    padding-bottom: 15px;
    padding-left: 15px;
  }
  .sysuser-table {
    padding: 0 15px;
    flex: 1;
    // min-height: 300px;
    // display:flex;
    // flex-direction: column;
    // justify-items: space-between;
    .inner {
      height: 100%;
      box-sizing: border-box;
    }
  }
  .block {
    padding-bottom: 5px;
    padding-right: 15px;
  }
}
.tu1 {
  position: relative;
  img {
    position: absolute;
    top: 50px;
    left: 10px;
  }
}
.tu2 {
  position: relative;
  img {
    position: absolute;
    top: 50px;
    left: 10px;
  }
}
.tu3 {
  position: relative;
  img {
    position: absolute;
    top: 50px;
    left: 10px;
  }
}
</style>
